import React from 'react';
import PropTypes from 'prop-types';
import styles from './style.less';

class Circle extends React.Component {
    componentDidMount() {
    }

    render() {
        const { data } = this.props;
        const circle = new Array(20).fill(0); // 默认一圈20个点
        return (
            <div className={styles.bigCircl}>
                <div className={styles.outerThree}>
                    {
                        circle.map((v, i) => {
                            let color = 'rgba(85, 226, 249, 0.2)';
                            if (i < Math.round(data.now / data.max * 20)) {
                                color = '#fff';
                            }
                            return <div key={String(i)} className={styles.outerThreePiece} style={{ transform: `rotateZ(${i * 18}deg)`, background: color }} />;
                        })
                    }
                </div>
                <div className={styles.smallCircl}>{Math.round(data.now / data.max * 100)}%</div>
            </div>
        );
    }
}

Circle.propTypes = {
    data: PropTypes.object,
};

Circle.defaultProps = {
    data: {
        now: 0,
        max: 0,
        title: '暂无',
    },
};

export default Circle;
